<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>


<%@page import="oop.data.Test"%><script type="text/javascript">
<!--

var allowedTime = ${test.time} * 60;
var timeLeft = allowedTime;
var questionLeft = ${fn:length(test.questions)};

function validateDone() {
	return $('chkDone').checked;
}

function updateTime() {
	if (timeLeft <= 0) {
		$('chkDone').checked = true;
		$('btnSubmit').click();
		return;
	}

	timeLeft--;
	$('lblMinute').innerHTML = Math.floor(timeLeft / 60);
	$('lblSecond').innerHTML = timeLeft % 60;
	$('txtTime').value = new String(allowedTime - timeLeft);
	
	setTimeout('updateTime()', 1000);
}

//-->
</script>

<form method="get" action="${scriptPath}">
	<h3>${test.name}</h3>
	<p><b>Mô tả:</b> ${test.description}</p>
	<p><b>Thời gian:</b> ${test.time} phút</p>


	<input type="hidden" name="action" value="test.solve"></input>
	<input type="hidden" name="id" value="${test.id}"></input>
	<input type="hidden" name="time" value="0" id="txtTime"></input>
	
	<c:set var="i" value="0"></c:set>
	<c:set var="type" value='${test.type=="radio" ? "radio" : "checkbox"}'></c:set>
	<c:forEach items="${test.questions}" var="question">
	<div>
		<p><b>Câu ${i+1}</b>
		</p>
		
		${param[question.id]}
		
		${question.content}
		<ul style="list-style:none">
		<c:forEach items="${question.answers}" var="answer">
			<li>
				<label>
					<input type='${type}' 
							name="${question.id}" value="${answer.id}"></input>
					${answer.content}
				</label>
			</li>
		</c:forEach>
		</ul>
	</div>
	<c:set var="i" value="${i+1}"></c:set>
	</c:forEach>
	
	<label><input type="checkbox" id="chkDone">Xong</label>
	<button id="btnSubmit" name="submit" value="done" 
			onclick="return validateDone();">Gửi</button>
</form>

<div style="position:fixed; bottom:0px; right:0px">
Số câu còn lại: <span id="lblQuestionCount">${fn:length(test.questions)}</span>
Thời gian còn lại: <span id="lblMinute">${test.time}</span>:<span id="lblSecond">00</span>
</div>

<script>
updateTime();
</script>